<template>
  <div style="height: 100%;" ref="imgLoad">
    <div class="results" v-if="!moneyFlag">
      <div class="result" v-if="result === 'true'" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/primary/bg.jpg' + ')'}">
        <img class="result-img" :src="cdnUrl + '/assets/primary/result/result-right.png'" alt="" />
      </div>
      <div class="bottom" v-if="result === 'true'">
        <img class="share-text" :src="cdnUrl + '/assets/primary/result/share-text.png'" alt="" />
        <div class="share-unlick" @click="toReturn">
          <img :src="cdnUrl + '/assets/primary/result/unlock.png'" alt="" />
        </div>
        <div class="result-btn">
          <div class="money" @click="goMoney">
            <img :src="cdnUrl + '/assets/primary/result/get-money.png'" alt="" />
          </div>
          <div class="share" @click="showShare">
            <img :src="cdnUrl + '/assets/primary/result/share-y.png'" alt="" />
          </div>
        </div>
      </div>
      <div class="result-share" ref="share" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/primary/bg.jpg' + ')'}">
        <img class="result-img" :src="result === 'true'? cdnUrl + '/assets/primary/result/result-right.png':cdnUrl + '/assets/primary/result/result-wrong.png'" alt="" />
        <img class="code" :src="cdnUrl + '/assets/money/code.png'" alt="" />
        <img class="code-text" :src="cdnUrl + '/assets/primary/result/code-text.png'" alt="" />
      </div>
      <img class="share-img" :src="img" alt="" />
      <div class="result" v-if="result === 'false'" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/primary/bg.jpg' + ')'}">
        <img class="result-img" :src="cdnUrl + '/assets/primary/result/result-wrong.png'" alt="" />
      </div>
      <div class="bottom bottom-wrong" v-if="result === 'false'">
        <img class="share-text" :src="cdnUrl + '/assets/primary/result/share-text.png'" alt="" />
        <div class="result-btn">
          <div class="return" @click="toReturn">
            <img :src="cdnUrl + '/assets/primary/result/return.png'" alt="" />
          </div>
          <div class="share" @click="showShare">
            <img :src="cdnUrl + '/assets/primary/result/share-r.png'" alt="" />
          </div>
        </div>
      </div>
      <Share v-if="shareFlag" @hide="hideShare"></Share>
    </div>
    <Money v-if="moneyFlag" :type="'1'" @toReturn="toReturn"></Money>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Canvas2Image from 'canvas2image'
import ImagesLoaded from 'imagesloaded'
import Money from '../money/Money'
import Share from '../share/Share'
import { cdnUrl } from '../../service/env'

export default {
  name: 'PriResult',
  props: {
    result: String,
    goReturns: Function
  },
  data () {
    return {
      img: '',
      moneyFlag: false,
      shareFlag: false,
      cdnUrl: cdnUrl
    }
  },
  components: {
    Money,
    Share
  },
  mounted () {
    ImagesLoaded(this.$refs.imgLoad, () => {
      // if (this.result === 'true') {
      this.toShare()
      // }
    })
  },
  methods: {
    toShare () {
      html2canvas(this.$refs.share,{
        useCORS: true, //（图片跨域相关）
        allowTaint: false
      }).then((canvas) => {
        this.img = Canvas2Image.convertToPNG(canvas).getAttribute('src')
      })
    },
    // 再来一次
    toReturn () {
      this.$emit('goReturns')
    },
    // 抢红包
    goMoney () {
      this.moneyFlag = true
    },
    // 分享蒙层
    showShare () {
      this.shareFlag = true
    },
    hideShare () {
      this.shareFlag = false
    }
  }
}
</script>

<style scoped lang="scss">
.results{
  width: 100%;
  height: 100%;
  .result{
    width: 100%;
    height: 100%;
    // background: url("../../assets/primary/bg.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .result-img{
      width: 84%;
      margin: 20px auto 12px;
    }
  }
  .bottom{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 12;
    margin: 366px auto 0;
    width: 100%;
    .share-text{
      width: 56%;
      margin: 0 auto 11px;
    }
    .share-unlick{
      width: 56%;
      margin: 0 auto 11px;
      img{
        width: 100%;
      }
    }
    .result-btn{
      width: 56%;
      margin: 0 auto 11px;
      overflow: hidden;
      .money{
        width: 54.4%;
        margin-right: 6.5%;
        float: left;
        img{
          width: 100%;
        }
      }
      .share{
        width: 38.9%;
        float: left;
        img{
          width: 100%;
        }
      }
      .return{
        width: 54.4%;
        margin-right: 6.5%;
        float: left;
        img{
          width: 100%;
        }
      }
    }
  }
  .bottom-wrong{
    margin-top: 390px;
  }
  .result-share{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    // background: url("../../assets/primary/bg.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .result-img{
      width: 84%;
      margin: 20px auto 12px;
    }
    .code{
      width: 58px;
      height: 58px;
      margin: 30px auto 8px;
    }
    .code-text{
      width: 58px;
      margin: 0 auto;
    }
  }
  .share-img{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    opacity: 0;
    pointer-events: unset;
  }
}
</style>
